<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>基础地图</title>
  <link rel="stylesheet" href="http://minedata.cn/minemapapi/v2.0.0/minemap.css">
  <script src="http://minedata.cn/minemapapi/v2.0.0/minemap.js"></script>
  <script src="http://minedata.cn/minemapapi/v2.0.0/plugins/wind/velocity.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    minemap.accessToken = 'ae291ab75d1b42d39ca220cb136b28a4';
    minemap.solution = 11217;
    var map = new minemap.Map({
      container: 'map',
      style: "http://minedata.cn/service/solu/style/id/11217",
      center: [108.952, 34.223],
      logoControl: !1,
      maxBounds: [
        [70 + 0.1, 0 + 0.1],
        [140 - 0.1, 60 - 0.1]
      ]
    });
    // map.addControl(new minemap.Navigation(), "bottom-right");

    var windVelocity;
    var windVelocityData = [];
    map.on('load', function () {
      // wind
      minemap.util.getJSON("./data/current-wind-surface-level-gfs-3.0.json", function (t, n) {
        windVelocityData = n || [];
        windVelocity.setData(n);
        windVelocity.drawLayer();
      });

      Velocity.initVelocityComponent(map);
      windVelocity = new Velocity({
        canvas: document.getElementById("windcanvas"),
        displayValues: !0,
        displayOptions: {
          velocityType: "Velocity",
          position: "bottomleft",
          emptyString: "No velocity data"
        },
        uLineRatio: 2.4,
        vLineRatio: 1.2,
        maxVelocity: 10,
        colorScale: ["rgba(0, 255, 255, 0.5)", "rgba(100, 240, 255, 0.5)", "rgba(135, 225, 255, 0.5)",
          "rgba(160, 208, 255, 0.5)", "rgba(181, 192, 255, 0.5)", "rgba(198, 173, 255, 0.5)",
          "rgba(212, 155, 255, 0.5)", "rgba(225, 133, 255, 0.5)", "rgba(236, 109, 255, 0.5)",
          "rgba(255, 30, 219, 0.5)"
        ],
        // colorScale: ["rgba(85, 85, 85, 1)", "rgba(95, 95, 95, 1)", "rgba(105, 105, 105, 1)",
        //   "rgba(115, 115, 115, 1)", "rgba(125, 125, 125, 1)", "rgba(135, 135, 135, 1)",
        //   "rgba(145, 145, 145, 1)", "rgba(155, 155, 155, 1)", "rgba(165, 165, 165, 1)",
        //   "rgba(175, 175, 175, 1)", "rgba(185, 185, 185, 1)", "rgba(195, 195, 195, 1)",
        //   "rgba(205, 205, 205, 1)", "rgba(215, 215, 215, 1)", "rgba(225, 225, 225, 1)",
        //   "rgba(235, 235, 235, 1)", "rgba(245, 245, 245, 1)", "rgba(255, 255, 255, 1)"
        // ],
        data: windVelocityData,
        map: map
      });

      // temp
      map.addSource("temp", {
        "type": "image",
        "url": "./data/2019030600_003.png",
        "coordinates": [
          [70, 60],
          [140, 60],
          [140, 0],
          [70, 0]
        ]
      });
      map.addLayer({
        "id": "imageLayer",
        "type": "raster",
        "source": "temp",
        "layout": {
          "visibility": "visible"
        },
        "paint": {
          "raster-opacity": 0.25
        }
      })
    });
  </script>
</body>